<template>
  <div class="gauge">
    <div class="label">

    </div>
    <div id="gauge" class="barChart"></div>
  </div>
</template>

<script>
  import { Chart } from '@antv/g2';
  export default {
  name: "gauge",
  mounted() {
    this.drawGauge();
  },
  methods: {
    drawGauge() {

      const data = [
        { question: '不确定', percent: 0.82 },
        { question: '正常', percent: 0.21 },
        { question: '中度', percent: 0.4 },
        { question: '重度', percent: 0.6 },
        { question: '严重', percent: 1.5},
      ];

      const chart = new Chart({
        container: 'gauge',
        autoFit: true,
      });

      chart.data(data);

      chart.scale('percent', {
        min: 0,
        max: 2,
      });

      chart.tooltip({
        title: 'question',
        showMarkers: false
      });

      chart.legend(false);
      chart.axis('question', {
        grid: null,
        tickLine: null,
        line: null,
        label: {
          style: {
            fill: '#29b6fb'
          }
        }
      });

      chart.coordinate('polar', { innerRadius: 0.1 }).transpose();

      chart
              .interval()
              .position('question*percent')
              .color('percent', '#8f8f8f-#ff0039')
              .tooltip('percent', (val) => {
                return {
                  name: '占比',
                  value: val * 100 + '%',
                };
              })
              .label('percent', {
                offset: -2,
                content: (data) => {
                  return data.percent * 100 + '%';
                }
              });
      chart.interaction('element-active');

      chart.render();

    },
  },
};
</script>
<style scoped>
.gauge {
  width: 100%;
  height: 100%;
}
.barChart {
  width: 100%;
  height: calc(100% - 1.5rem);
  box-sizing: border-box;
}
</style>
